<template>
  <div class="global-slide-up-animation total-num-block">
    <div v-for="(_, key) in dataCpt" :key="key" class="item">
      <div class="icon">
        <div class="bg" :style="{ backgroundColor: itemMap[key]?.color }"></div>
        <el-icon :color="itemMap[key]?.color" size="calc(var(--my-change-base12-2x-size) + 16px)">
          <component :is="itemMap[key]?.icon"></component>
        </el-icon>
      </div>
      <div class="info">
        <div>{{ itemMap[key]?.label }}</div>
        <div>
          <rest-count-to :endVal="dataCpt[key]" :curStyle="valueStyle" :precision="2" :forcedDecimals="false"></rest-count-to>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { CSSProperties, Component } from 'vue';
  import SolarWalletMoneyBold from '~icons/solar/wallet-money-bold';
  import SolarChart2Bold from '~icons/solar/chart-2-bold';
  import SolarGraphNewBold from '~icons/solar/graph-new-bold';
  import SolarPresentationGraphBold from '~icons/solar/presentation-graph-bold';
  import SolarPieChart2Bold from '~icons/solar/pie-chart-2-bold';
  import SolarClapperboardPlayBoldDuotone from '~icons/solar/clapperboard-play-bold-duotone';
  import SolarUsersGroupRoundedBold from '~icons/solar/users-group-rounded-bold';
  import SolarPaperclipBroken from '~icons/solar/paperclip-broken';
  import SolarBagCheckBold from '~icons/solar/bag-check-bold';
  import RestCountTo from '@/components/rest/rest-count-to/rest-count-to.vue';
  import type { HomeCensus, HomeEarningsData } from '@/api/home';

  interface Props {
    /** 数据 */
    statisticsData?: HomeCensus;
  }

  const props = withDefaults(defineProps<Props>(), {
    statisticsData: () => ({}),
  });

  const valueStyle: CSSProperties = {
    fontSize: `calc(var(--my-change-base12-2x-size) + 8px)`,
    fontWeight: `bolder`,
    color: `var(--el-color-primary)`,
  };

  type ItemMap = Record<
    string,
    {
      color: string;
      label: string;
      icon: Component;
    }
  >;

  const itemMap = ref<ItemMap>({
    'todayConsume': {
      color: 'var(--el-color-primary)',
      label: '今日消耗',
      icon: SolarWalletMoneyBold,
    },
    'todayEarnings': {
      color: 'var(--el-color-warning)',
      label: '今日收益',
      icon: SolarChart2Bold,
    },
    'yesterdayEarnings': {
      color: 'var(--el-color-danger)',
      label: '昨日收益',
      icon: SolarGraphNewBold,
    },
    'weekEarnings': {
      color: 'var(--el-color-success)',
      label: '本周收益',
      icon: SolarPresentationGraphBold,
    },
    'monthEarnings': {
      color: 'var(--el-color-primary)',
      label: '本月收益',
      icon: SolarPieChart2Bold,
    },
    'roi': {
      color: 'var(--el-color-warning)',
      label: 'ROI',
      icon: SolarPaperclipBroken,
    },
    'vipUserCount': {
      color: 'var(--el-color-danger)',
      label: '总会员数',
      icon: SolarUsersGroupRoundedBold,
    },
    'dramaCount': {
      color: 'var(--el-color-success)',
      label: '总剧目数',
      icon: SolarClapperboardPlayBoldDuotone,
    },
    'orderCount': {
      color: 'var(--el-color-primary)',
      label: '总订单数',
      icon: SolarBagCheckBold,
    },
    'orderCountAmount': {
      color: 'var(--el-color-warning)',
      label: '总订单金额',
      icon: SolarWalletMoneyBold,
    },
    'consumptionBalance': {
      color: 'var(--el-color-danger)',
      label: '消耗金额',
      icon: SolarGraphNewBold,
    },
  });

  const dataCpt = computed<HomeEarningsData>(() => {
    return {
      todayConsume: props.statisticsData.todayConsume,
      todayEarnings: props.statisticsData.todayEarnings,
      yesterdayEarnings: props.statisticsData.yesterdayEarnings,
      weekEarnings: props.statisticsData.weekEarnings,
      monthEarnings: props.statisticsData.monthEarnings,
      roi: props.statisticsData.roi,
      vipUserCount: props.statisticsData.vipUserCount,
      dramaCount: props.statisticsData.dramaCount,
      orderCount: props.statisticsData.orderCount,
      orderCountAmount: props.statisticsData.orderCountAmount,
      consumptionBalance: props.statisticsData.consumptionBalance,
    };
  });
</script>

<style lang="scss" scoped>
  .total-num-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    width: 100%;
    padding-right: 15px;

    .item {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: start;
      height: 134px;
      padding-left: 55px;
      background: $c-bg-block;
      border-radius: 16px;

      .icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
        overflow: hidden;
        border-radius: 50%;

        .bg {
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0.1;
        }
      }

      .info {
        div:nth-child(1) {
          font-size: calc(var(--my-change-base12-2x-size));
          line-height: 1em;
          color: var(--el-text-color-regular);
        }

        div:nth-child(2) {
          margin-top: 10px;
        }
      }
    }
  }
</style>
